<template>
    <div class="bottom-bar">
        <div class="width-bar-item" @click="$emit('changeShow','widthSheetShow',true)">
            <div class="width-logo"></div>
            <div class="width-name">线宽</div>
        </div>
        <div class="color-bar-item" @click="$emit('changeShow','colorSheetShow',true)">
            <div class="color-logo"></div>
            <div class="color-name">颜色</div>
        </div>
        <div class="clear-bar-item" @click="clearScreen">
            <div class="clear-logo"></div>
            <div class="clear-name">清除</div>
        </div>
        <div class="replay-bar-item" @click="$emit('changeShow','replayProgressShow')">
            <div class="replay-logo"></div>
            <div class="replay-name">回放</div>
        </div>
        <van-popover v-model="popShow1" placement="top-end" trigger="click">
            <div class="pop-item" @click="openOfflineData">离线数据</div>
            <div class="pop-item" @click="openPenData">笔参数</div>
            <div class="pop-item">
                <div>笔锋绘制</div>
                <van-switch size=".24rem" active-color="#EC6938" inactive-color="#B4C1D3" v-model="isStroke" />
            </div>
            <div class="pop-item">
                <div>过滤算法</div>
                <van-switch size=".24rem" active-color="#EC6938" inactive-color="#B4C1D3" v-model="filtrationAlgorithm" />
            </div>
            <div class="pop-item">
                <div>显示手写码值</div>
                <van-switch size=".24rem" active-color="#EC6938" inactive-color="#B4C1D3" v-model="filtrationAlgorithm" />
            </div>
            <div class="pop-item">
                <div>显示无效码</div>
                <van-switch size=".24rem" active-color="#EC6938" inactive-color="#B4C1D3" v-model="filtrationAlgorithm" />
            </div>
            <template #reference>
                <div class="more-bar-item">
                    <div class="more-logo"></div>
                    <div class="more-name">更多</div>
                </div>
            </template>
        </van-popover>
    </div>
</template>

<script>
    import { mapGetters, mapActions, mapMutations } from 'vuex';
    export default {
        data() {
            return {
                popShow1: false,
                //笔锋算法
                filtrationAlgorithm: false,
            }
        },
        computed: {
            ...mapGetters(['bluetooth', 'isFirst', 'tqlCanvas','qwBluetooth']),
            isStroke: {
                get() {
                    return this.$store.getters.isStroke
                },
                set(newVal) {
                    this.setIsStroke(newVal)
                }
            }
        },
        methods: {
            ...mapActions(['batchSendCommand']),
            ...mapMutations(['setIsFirst', 'setIsStroke']),
            //打开离线 sheet
            openOfflineData() {
                this.qwBluetooth.startF202Notifications()
                this.$emit('changeShow', 'offlineSheetShow', true)
            },
            //打开笔参数 pop
            openPenData() {
                this.qwBluetooth.startF101Notifications()
                console.log(this.isFirst);
                if (this.isFirst) {
                    this.batchSendCommand()
                    this.setIsFirst(false)
                }
                this.$emit('changeShow', 'penDataShow', true)
            },
            //清除屏幕
            clearScreen() {
                this.$dialog.confirm({
                    title: '提示',
                    message: '确定清除所有页的笔迹吗？',
                }).then(() => {
                    this.tqlCanvas.clearScreen().then((data) => {
                        console.log(data);
                    }).catch((e) => {
                        console.log(e);
                    })
                }).catch(() => {
                    return
                });
            },
        }
    }
</script>

<style lang="less" scoped>
    .bottom-bar {
        background-color: #FFFFFF;
        display: flex;
        height: 1rem;

        .van-popover__wrapper {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .width-bar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .width-logo {
                width: .52rem;
                height: .52rem;
                background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/width.png');
                background-repeat: no-repeat;
                background-size: cover;
            }

            .width-name {
                color: #585E77;
                margin-top: .1rem;
                font-size: .16rem;
                line-height: .16rem;
            }

            &:active {
                .width-logo {
                    background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/width-active.png');
                }

                .width-name {
                    color: #EC6938;
                }
            }
        }

        .color-bar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .color-logo {
                width: .52rem;
                height: .52rem;
                background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/color.png');
                background-repeat: no-repeat;
                background-size: cover;
            }

            .color-name {
                color: #585E77;
                margin-top: .1rem;
                font-size: .16rem;
                line-height: .16rem;
            }

            &:active {
                .color-logo {
                    background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/color-active.png');
                }

                .color-name {
                    color: #EC6938;
                }
            }
        }

        .clear-bar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .clear-logo {
                width: .52rem;
                height: .52rem;
                background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/clear.png');
                background-repeat: no-repeat;
                background-size: cover;
            }

            .clear-name {
                color: #585E77;
                margin-top: .1rem;
                font-size: .16rem;
                line-height: .16rem;
            }

            &:active {
                .clear-logo {
                    background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/clear-active.png');
                }

                .clear-name {
                    color: #EC6938;
                }
            }
        }

        .replay-bar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .replay-logo {
                width: .52rem;
                height: .52rem;
                background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/replay.png');
                background-repeat: no-repeat;
                background-size: cover;
            }

            .replay-name {
                color: #585E77;
                margin-top: .1rem;
                font-size: .16rem;
                line-height: .16rem;
            }

            &:active {
                .replay-logo {
                    background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/replay-active.png');
                }

                .replay-name {
                    color: #EC6938;
                }
            }
        }

        .more-bar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .more-logo {
                width: .52rem;
                height: .52rem;
                background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/more.png');
                background-repeat: no-repeat;
                background-size: cover;
            }

            .more-name {
                color: #585E77;
                margin-top: .1rem;
                font-size: .16rem;
                line-height: .16rem;
            }

            &:active {
                .more-logo {
                    background-image: url('https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/more-active.png');
                }

                .more-name {
                    color: #EC6938;
                }
            }
        }
    }

    .pop-item {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 1.8rem;
        height: .6rem;
        font-size: .18rem;
        line-height: .18rem;
    }
</style>